import React,{Component} from 'react';
import {connect} from 'react-redux'
import { Link } from 'react-router-dom'
import {actionCreator} from '../store'
import { ListItem, ListInfo, ListLoading } from '../style'

class List extends Component{
  render() {
    let {articleList, page} = this.props
    return (
      <div>
        {
          articleList.map((item, index) => {
            return (
              <Link key={index} to={'/detail/' + item.get('id')}>
                <ListItem>
                  <ListInfo>
                    <h3 className="title">{item.get('title')}</h3>
                    <p className="desc">{item.get('desc')}</p>
                  </ListInfo>
                  <img src={item.get('url')} alt=""/>
                </ListItem>
              </Link>
            )
          })
        }
        <ListLoading onClick={() => this.props.loadList(page)}>
          阅读更多...
        </ListLoading>
      </div>
    )
  }
}


const mapStateToProps = (state) => ({
  articleList: state.getIn(['home', 'articleList']),
  page: state.getIn(['home', 'page'])
});

const mapDispatchToProps = (dispatch) => ({
    loadList(page) {
      dispatch(actionCreator.loadListAction(page))
    }
});

export default connect(mapStateToProps, mapDispatchToProps)(List);